In SvelteKit, stores persist in memory as long as the application is running. This means that when you navigate between routes, the store values will not automatically reset. If you need to reset a store when the route changes (e.g., clearing form data or search filters), you can listen to navigation events and manually reset the store.
SvelteKit provides the $page store, which updates whenever the route changes. You can watch for changes in $page and reset your custom store whenever a new route is loaded.
You can also listen to route navigation events using beforeNavigate or afterNavigate from $app/navigation and reset the store whenever navigation occurs.
Instead of globally resetting a store, you can create the store inside a route-level component so that it is destroyed and recreated when the route changes. This way, the store automatically resets without extra logic.
Stores in SvelteKit persist between routes unless manually reset.
Use $page store to detect route changes reactively.
afterNavigate and beforeNavigate allow handling logic during route changes.
Scoped stores automatically reset when the component is destroyed.
Choose the right approach depending on whether your store is global or route-specific.